import reactive from "./reactive"
import pools from './pools'
import eventBind from './event'
import { render } from './render'

export function createApp(component) {
  const vm = {}
  const $data = component.data()
  const $template = component.template
  const $methods = component.methods

  vm.DOM = createDOM($template)
  const { propsPool, eventPool } = pools(vm.DOM, $methods)

  vm.mount = mount

  const init = () => {
    reactive(vm, $data, propsPool)
    eventBind(vm, eventPool)
    render(vm, propsPool)
  }

  init()

  return vm
}

function createDOM(template) {
  const _c = document.createElement('div')
  _c.innerHTML = template

  return getFirstElementChild(_c)
}

function getFirstElementChild(node) {
  const childNodes = node.childNodes
  let childNode

  for (let i = 0; i < childNodes.length; i++) {
    childNode = childNodes[i]

    // 元素节点
    if (childNode.nodeType === 1) {
      return childNode
    }
  }
}

function mount(el) {
  this.$el = document.querySelector(el)
  this.$el.appendChild(this.DOM)

  return this
}

/**
 * 建立缓存池，Node -> Data
 * {
 *  node,
 *  {
 *    type: 'v-if',
 *    props: 'isShowImg1'
 *  }
 * }
 * 
 * {
 *  node,
 *  {
 *    type: 'click',
 *    handler: showImg1
 *  }
 * }
 */